<template>
    <div class="views-mine-box">
        <div class="mine-top-msg">
            <div class="msg-box">
                <div class="head-img">
                    <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1551704978&di=da439edf6600672d9e48a0d539082234&src=http://b-ssl.duitang.com/uploads/item/201603/09/20160309212819_PxYHV.jpeg" alt="">
                </div>
                <div class="name-box">
                    <div class="name">vio vio</div>
                    <div class="id-box">
                        <p class="eag"><i class="mind"></i>18岁</p>
                        <p class="id">ID:<span class="id-num">123456</span>></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="list-box">
            <div class="grade-box">
                <div class="grade-top">
                    <div class="grade-text">
                        <span class="text">等级</span> 
                    </div>
                    <div class="status-left">
                        <span class="status-left-text">平民</span>
                    </div>
                    <div class="gap">
                        <span class="gap-text">
                            当前还差100升级
                        </span>
                    </div>
                    <div class="status-right">
                        <i class="icon"></i>
                        <span class="status-right-text">
                            <img src="../assets/images/mine-img/9_03.png" alt="">
                        </span>
                    </div>
                </div>
                <div class="grade-bott">
                    <div class="v-strip">
                        <div class="v-img">
                            <i class="v-img-box">V</i>
                        </div>
                        <div class="strip-">
                            <span class="dli-left"></span>
                            <p class="scell"></p>
                            <span class="dli-right"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="guest-box maginbott">
                <div class="guest-img">
                    <i class="guest-img-box">
                        <img src="../assets/images/mine-img/2_03.png" alt="">
                    </i>
                </div>
                <div class="guest-">
                    <span class="text-left">贵宾卡</span>
                    <span class="text-right">
                        <img src="" alt="">
                    </span>
                </div>
            </div>
            <div class="guest-box">
                <div class="guest-img">
                    <i class="guest-img-box">
                        <img src="../assets/images/mine-img/3_03.png" alt="">
                    </i>
                </div>
                <div class="guest-">
                    <span class="text-left">钱包</span>
                    <span class="text-right">
                        <img src="" alt="">
                    </span>
                </div>
            </div>
            <div class="guest-box">
                <div class="guest-img">
                    <i class="guest-img-box">
                        <img src="../assets/images/mine-img/4_03.png" alt="">
                    </i>
                </div>
                <div class="guest-">
                    <span class="text-left">收益</span>
                    <span class="text-right">
                        <img src="" alt="">
                    </span>
                </div>
            </div>
            <div class="guest-box">
                <div class="guest-img">
                    <i class="guest-img-box">
                        <img src="../assets/images/mine-img/5_03.png" alt="">
                    </i>
                </div>
                <div class="guest-">
                    <span class="text-left">商城</span>
                    <span class="text-right">
                        <img src="" alt="">
                    </span>
                </div>
            </div>
            <div class="guest-box">
                <div class="guest-img">
                    <i class="guest-img-box">
                        <img src="../assets/images/mine-img/6_03.png" alt="">
                    </i>
                </div>
                <div class="guest-">
                    <span class="text-left">邀请好友赢现金</span>
                    <span class="text-right">
                        <img src="" alt="">
                    </span>
                </div>
            </div>
            <div class="guest-box">
                <div class="guest-img">
                    <i class="guest-img-box">
                        <img src="../assets/images/mine-img/7_03.png" alt="">
                    </i>
                </div>
                <div class="guest-">
                    <span class="text-left">帮助</span>
                    <span class="text-right">
                        <img src="" alt="">
                    </span>
                </div>
            </div>
            <div class="guest-box maginbott">
                <div class="guest-img">
                    <i class="guest-img-box">
                        <img src="../assets/images/mine-img/8_03.png" alt="">
                    </i>
                </div>
                <div class="guest-">
                    <span class="text-left">帮助</span>
                    <span class="text-right">
                        <img src="" alt="">
                    </span>
                </div>
            </div>
        </div>


    </div>
</template>


<style lang="stylus" scoped>
.views-mine-box
    width 100%
    height 100%
    overflow hidden
    font-size .32rem
    .mine-top-msg
        width 100%
        height 2.68rem
        background url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551716320480&di=57c6cf47848de3efc31bd946f9c67d09&imgtype=0&src=http%3A%2F%2Fwww.jituwang.com%2Fuploads%2Fallimg%2F101028%2F290-10102PG5170.jpg')
        background-size 100%
        position relative
        overflow hidden
        .msg-box
            width 100%
            height 1.32rem
            position absolute
            top .69rem
            display flex
            .head-img
                height 100%
                width 1.32rem
                border-radius 50%
                overflow hidden
                margin-right .65rem
                margin-left .24rem
                img
                    width 100%
            .name-box
                color #fff
                height 100%
                flex 1
                .name
                    font-size .4rem
                    margin-top .14rem
                .id-box
                    display flex
                    font-size .30rem
                    margin-top .22rem
                    box-sizing border-box
                    .eag
                        font-size .22rem
                        width .75rem
                        height .33rem
                        background #60BDE0
                        border-radius .17rem
                        text-align center
                        line-height .33rem
                        margin-right .13rem
                        box-sizing border-box
                        .mind
                            display inline-block
                            width .18rem
                            height .16rem
                            background #fff
    .list-box
        width 100%
        padding-right .2rem
        padding-left  .26rem
        box-sizing border-box
        .grade-box
            width 100%
            height 1.61rem
            background #fff
            padding-top .22rem  
            box-sizing border-box 
            .grade-top
                display flex  
                height .67rem
                .grade-text
                    font-size .28rem
                    padding-top .13rem
                    box-sizing border-box
                    margin-right .52rem
                .status-left
                    padding-top .05rem
                    box-sizing border-box
                    margin-right .46rem
                    .status-left-text
                        width .6rem
                        height .29rem
                        display inline-block
                        background #73C5BA
                        border-radius .03rem
                        font-size .2rem
                        text-align center
                        line-height .29rem
                        color #fff
                .gap
                    margin-right .86rem    
                    .gap-text
                        width 2.77rem
                        height .45rem
                        display inline-block
                        border 1px solid #73C5BA
                        font-size .20rem
                        color #999999
                        text-align center
                        line-height .4rem
                        border-radius .19rem
                        box-sizing border-box
                .status-right
                    padding-top .05rem
                    box-sizing border-box
                    .status-right-text
                        display inline-block
                        width .95rem
                        height .43rem
                        img 
                            width 100%
            .grade-bott
                width 100%
                .v-strip
                    width 100%
                    display flex
                    .v-img
                        margin-right .45rem
                        .v-img-box
                            display inline-block
                            width .5rem
                            height .49rem
                            background #F08A47
                            border-radius .13rem
                            color #fff
                            font-style normal
                            text-align center
                            line-height .49rem
                .strip-
                    flex 1
                    position relative
                    width 5.44rem
                    .scell
                        height .11rem
                        width 5.44rem
                        background #ECECEB
                        position absolute
                        top .2rem
                    span
                        width .22rem
                        height .22rem
                        background #59BEB2
                        border-radius 50%
                        display block 
                        position absolute
                        z-index 10
                        top .142rem
                    .dli-right
                        right .5rem
                    .dli-left
                        left -.03rem
        .guest-box
            display flex
            height 1.08rem
            line-height 1.08rem
            .guest-img
                margin-right .45rem
                padding-top .13rem
                .guest-img-box
                    width .5rem
                    height .49rem
                    display inline-block
                    img 
                        width 100%
            .guest-
                .text-left
                    display inline-block
                    width 5.3rem
                .text-right
                    display inline-block
                    width .19rem
                    height .34rem
                    background #ccc
                    vertical-align middle
        .maginbott
            margin-bottom .2rem
        


</style>
